import {Stack} from "@mui/system";
import {IconButton, TextField} from "@mui/material";
import {Delete, Close, Edit, Add, Lock, LockOpen, Settings, PushPin, PushPinOutlined} from "@mui/icons-material"
import {useCallback, useEffect, useRef, useState} from "react";

export default (props) => {
    const {defaultValue} = props;
    const urlParams = new URLSearchParams(window.location.search);
    const filename = urlParams.get('name');
    console.log("获取到的get name", filename)
    // const filename = 'text.txt'
    const [isLock, setIsLock] = useState(false) // 锁定便签 不允许移动 不允许编辑
    const [isPin, setIsPin] = useState(false) // 图钉固定 永远保持窗口在最上面
    const [value, setValue] = useState('')
    const ref = useRef()

    useEffect(()=>{
        // 读取配置信息
        if(window.sohoApi) {
            window.sohoApi.onMessage('readFile', (e, data)=>{
                const {content, isLock,isPin} = data;
                console.log("ui file name:", data)
                setValue(content)
                setIsLock(Boolean(isLock))
                setIsLock(Boolean(isPin))
            })
            window.sohoApi.send('readFile', {name: filename})
        }
    }, [setValue])


    const save = useCallback(() => {
        console.log("保存", isLock, ref.current.value)
        window.sohoApi.send('saveFile', {name: filename,isLock,isPin, content: ref.current.value})
    }, [isLock, isPin])

    useEffect(()=>{
        if(ref.current && ref.current.value) {
            save()
        }
    }, [isPin, isLock])

    useEffect(()=>{
        if(window.sohoApi) {
            const callback = (e, position)=>{
                console.log("移动事件", e, position)
                save();
            }
            window.sohoApi.onMessage('move', callback)
            return () => {
                console.log("析构函数")
                window.sohoApi.offAllMessage('move')
            }
        }
    }, [isLock, ref.current])


    // 值变化
    const handleEditChange = useCallback((e) => {
        setValue(e.target.value)
        console.log(e.target.value)
        if(window.sohoApi) {
            window.sohoApi.send('saveFile', {name: filename,isLock, content: e.target.value})
        }
    }, []);

    //关闭当前便签
    const onClose = useCallback((e)=>{
        if(window.sohoApi) {
            window.sohoApi.setClose();
        }
    }, [])

    //隐藏当前便签
    const onHide = useCallback((e)=>{
        if(window.sohoApi) {
            window.sohoApi.setHide();
        }
    }, [])
    //锁定标签
    const onLock = useCallback(()=>{
        setIsLock(true)
    }, [])
    //解锁
    const onUnLock = useCallback(()=>{
        setIsLock(false)
    }, [])
    //新增便签
    const onAdd = useCallback(()=>{
        if(window.sohoApi) {
            window.sohoApi.send('new')
        }
    }, [])
    //on deleted
    const onDelete = useCallback(()=>{
        if(window.sohoApi) {
            window.sohoApi.send('delete', {name: filename})
        }
    }, [])
    // on Settings
    const onSettings = useCallback(()=>{}, [])

    const onPin = useCallback(()=>{
        if(window.sohoApi) {
            window.sohoApi.send('pin', {status: !isPin})
        }
        setIsPin(!isPin)
    }, [isPin])

    return <Stack sx={{width: '100%', height: '100vh', backgroundColor: "#f8f51a"}}>
        <Stack  direction="row" justifyContent="flex-end"  spacing={0.5} sx={{backgroundColor: "#f8f51a"
        //    ,appRegion: 'drag'
        }}>
            <div style={{appRegion: isLock ?"no-drag":"drag", flex: 1}}></div>

            <IconButton onClick={onPin} aria-label="Push Pin" size="small">
                {isPin && <PushPin fontSize="inherit" />}
                {!isPin && <PushPinOutlined fontSize="inherit" />}
            </IconButton>
            <IconButton onClick={onSettings} aria-label="Settings" size="small">
                <Settings fontSize="inherit" />
            </IconButton>
            <IconButton onClick={onAdd} aria-label="Add" size="small">
                <Add fontSize="inherit" />
            </IconButton>
            {isLock && <IconButton onClick={onUnLock} aria-label="UnLock" size="small">
                <Lock fontSize="inherit" />
            </IconButton>}
            {!isLock && <IconButton onClick={onLock} aria-label="Lock" size="small">
                <LockOpen fontSize="inherit" />
            </IconButton>}
            <IconButton onClick={onDelete} aria-label="Delete" size="small">
                <Delete fontSize="inherit" />
            </IconButton>
            <IconButton onClick={onClose} aria-label="Close" size="small">
                <Close fontSize="inherit" />
            </IconButton>
        </Stack>
        <Stack sx={{flex: 1}}>

            <textarea ref={ref} spellCheck={false} onChange={handleEditChange} disabled={isLock} style={{height: '100%',
                backgroundColor: '#f8f51a', border: 'none',
                outlineWidth: '0px',
                spellChecker: 'disable',
                padding: '10px',
            }} value={value}></textarea>
        </Stack>
    </Stack>

}
